<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>export default命令</title>
</head>
<body>
    <h1>export default命令</h1>
    <h2>为模块指定默认输出</h2>

    <script type="module">
        // 默认导出一个函数
        export default function() {
            console.log('默认导出的函数');
        }

        // 默认导出一个类
        export default class {
            constructor(name) {
                this.name = name;
            }
        }

        // 默认导出一个值
        export default 42;

        // 错误写法
        // export default const foo = 'bar'; // 报错

        // 正确写法
        const foo = 'bar';
        export default foo;

        // 同时具有默认导出和具名导出
        export default function foo() {}
        export function bar() {}

        // 导入默认值
        import customName from './module.js';

        // 同时导入默认值和其他变量
        import defaultExport, { otherExport } from './module.js';

        // 实际应用示例
        // config.js
        const config = {
            apiUrl: 'https://api.example.com',
            timeout: 5000,
            retryCount: 3
        };
        export default config;

        // api.js
        export default class API {
            constructor(config) {
                this.config = config;
            }

            async request(endpoint) {
                const response = await fetch(
                    this.config.apiUrl + endpoint,
                    { timeout: this.config.timeout }
                );
                return response.json();
            }
        }

        // main.js
        import config from './config.js';
        import API from './api.js';

        const api = new API(config);
        api.request('/users').then(data => console.log(data));
    </script>
</body>
</html> 